<template>
  <div class="app-container node">
    <div class="node-header">
      <span>节点配置管理</span>
      <div class="node-header-right">
        <el-button type="primary" size="mini" @click="dialog.createNode = true">创建配置</el-button>
      </div>
    </div>
    <el-table
      :data="list"
      style="width: 100%">
      <el-table-column
        prop="name"
        label="节点IP">
        <template slot-scope="scope">
          <span>{{ scope.row.node_ip }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="登录端口">
        <template slot-scope="scope">
          <span>{{ scope.row.ssh_port }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="机器类型">
        <template slot-scope="scope">
          <span>{{ scope.row.machine_type }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="用户名">
        <template slot-scope="scope">
          <span>{{ scope.row.ssh_user }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        label="密码">
        <template slot-scope="scope">
          <span>{{ scope.row.ssh_password }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="80" align="center">
        <template slot-scope="scope">
          <a class="table-action" @click="handleEditForm(scope.row)">编辑</a>
          <a class="table-action" @click="clickDeleteNode(scope.row)">删除</a>
        </template>
      </el-table-column>
    </el-table>
    <!-- <div class="basePagenate">
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNumber"
        :page-count="total"
        layout="prev, pager, next"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div> -->
    <el-dialog
      :visible.sync="dialog.createNode"
      width="500px"
      @close="resetForm('createNodeForm')">
      <el-form ref="createNodeForm" :model="createNodeForm" :rules="rulesCreateNode" label-position="left" label-width="120px">
        <el-form-item label="节点IP：" prop="hostIp">
          <el-input v-model="createNodeForm.hostIp" :disabled="dialog.editNode" />
        </el-form-item>
        <el-form-item label="登录端口：" prop="sshPort">
          <el-input v-model="createNodeForm.sshPort" />
        </el-form-item>
        <el-form-item label="用户名：" prop="username">
          <el-input v-model="createNodeForm.username" />
        </el-form-item>
        <el-form-item label="密码：" prop="password">
          <el-input v-model="createNodeForm.password" type="password" auto-complete="new-password"/>
        </el-form-item>
        <el-form-item label="机器类型：" prop="machineType">
          <el-input v-model="createNodeForm.machineType" />
        </el-form-item>
        <!-- <el-form-item label="强制创建：" prop="machineType">
          <el-switch
            v-model="createNodeForm.force"
            active-text="是"
            inactive-text="否"
          />
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="dialog.createNode = false;">取 消</el-button>
        <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getNodeList, handleMachineConfig, handleKubeMachines } from '@/api/node'
import { mapGetters } from 'vuex'

export default {
  data() {
    return {
      pageNumber: 1,
      pageSize: 10,
      total: 0,
      list: null,
      listLoading: true,
      createNodeForm: {
        hostIp: '',
        sshPort: '',
        username: '',
        password: '',
        machineType: '',
        force: true
      },
      rulesCreateNode: {
        hostIp: [
          { required: true, message: '请填写节点IP', trigger: 'blur' }
        ],
        sshPort: [
          { required: true, message: '请填写登录端口', trigger: 'blur' }
        ],
        username: [
          { required: true, message: '请填写用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请填写密码', trigger: 'blur' }
        ],
        machineType: [
          { required: true, message: '请填写机器类型', trigger: 'blur' }
        ]
      },
      dialog: {
        createNode: false,
        editNode: false
      },
      curEditNode: {}
    }
  },
  computed: {
    ...mapGetters([
      'userName'
    ])
  },
  created() {
    this._getNodeList()
  },
  methods: {
    // 分页
    handleSizeChange(val) {
      this.pageSize = val
      this.pageNumber = 1
      this._getTicketList()
    },
    handleCurrentChange(val) {
      this.pageNumber = val
      this._getTicketList()
    },
    // 表单编辑
    handleEditForm(row) {
      this.dialog.editNode = true
      this.dialog.createNode = true
      this.curEditNode = row
      this.createNodeForm = {
        hostIp: this.curEditNode.node_ip,
        sshPort: this.curEditNode.ssh_port,
        username: this.curEditNode.ssh_user,
        password: this.curEditNode.ssh_password,
        machineType: this.curEditNode.machine_type
      }
    },
    // 点击删除节点
    clickDeleteNode(row) {
      this.$confirm('此操作将删除该节点, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const data = {
          host_ip: row.node_ip
        }
        this._handleNode('Delete', data)
      })
    },
    // 重置表单
    resetForm(formName) {
      this.dialog.createNode = false
      this.dialog.editNode = false
      this.createNodeForm = {
        hostIp: '',
        sshPort: '',
        username: '',
        password: '',
        machineType: '',
        force: true
      }
      this.$refs[formName].resetFields()
    },
    // 表单提交(createNodeForm: 新增|编辑节点)
    submitForm() {
      const method = this.dialog.editNode ? 'Put' : 'Post'
      this.$refs['createNodeForm'].validate((valid) => {
        if (valid) {
          const data = {
            host_ip: this.createNodeForm.hostIp,
            ssh_port: this.createNodeForm.sshPort,
            username: this.createNodeForm.username,
            password: this.createNodeForm.password,
            machine_type: this.createNodeForm.machineType
          }
          this._handleNode(method, data)
        } else {
          return false
        }
      })
    },
    // 查询节点配置列表
    _getNodeList() {
      getNodeList().then(res => {
        if (res.message.code === 0) {
          this.list = res.data
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 节点配置接口
    _handleNode(method, data) {
      handleMachineConfig(method, data).then(res => {
        if (res.message.code === 0) {
          if (method === 'Post') {
            this.resetForm('createNodeForm')
            this.$message({ message: '创建成功', showClose: true, type: 'success' })
          } else if (method === 'Put') {
            this.resetForm('createNodeForm')
            this.$message({ message: '保存成功', showClose: true, type: 'success' })
          } else {
            this.$message({ message: '删除成功', showClose: true, type: 'success' })
          }
          this._getNodeList()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    },
    // 节点接口
    _handleKubeMachines(method) {
      const data = [{
        host_ip: this.createNodeForm.hostIp,
        force: this.createNodeForm.force
      }]
      handleKubeMachines(method, data).then(res => {
        if (res.message.code === 0) {
          this.resetForm('createNodeForm')
          this.$message({ message: '创建成功', showClose: true, type: 'success' })
          this._getNodeList()
        } else {
          this.$message({ message: res.message.message, showClose: true, type: 'error' })
        }
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.node {
  &-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    background: #ffffff;
    font-size: 14px;
    color: #303133;
    font-weight: bold;
    margin-bottom: 20px;
    .header-title {
      font-size: 14px;
      font-weight: 700;
    }
    .header-title-left {
      float: right;
      height: 40px;
      line-height: 40px;
    }
  }
  .node-des {
    color: #136AD9;
    letter-spacing: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    word-break: break-all;
    word-wrap: break-word;
  }
  label {
    font-weight: normal
  }
  .table-action {
    color: #4285f4;
  }
  .table-link {
    color: #4285f4;
    &:hover {
      cursor: pointer;
    }
  }
  .ticket-view-dialog {
    .el-dialog__body {
      padding: 0;
    }
    .ticket-view-box {
      color: #5c5b5b;
      font-size: 14px;
      padding-bottom: 40px;
      .ticket-title {
        padding: 20px 40px 0;
        font-size: 14px;
        color: #5c5b5b;
      }
      .ticket-info-box {
        padding: 0 40px;
        .ticket-info-row {
          padding: 10px 0;
          display: flex;
          .row-item {
            width: 50%;
          }
          p {
            line-height: 30px;
            word-break: break-all;
            margin: 0;
          }
          .handle-form {
            width: 100%;
          }
        }
      }
      .seperator-line {
        border-bottom: 1px solid #ccc;
        margin: 0 40px;
      }
      .box-grey {
        background: #eee;
        margin-top: 15px;
      }
    }
  }
}
</style>
